<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>飞机大战</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div id="start-screen" class="screen">
    <h1>飞机大战</h1>
    <button onclick="startGame()">开始游戏</button>
  </div>

  <div class="stage" style="display:none;">
    <div class="game-controls">
      <button id="pauseButton" onclick="pauseGame()">暂停游戏</button>
    </div>
    <canvas id="canvas" width="650" height="850"></canvas>
  </div>

  <div id="pause-screen" class="screen screen-overlay" style="display:none;">
    <h1>游戏暂停</h1>
    <button onclick="resumeGame()">继续游戏</button>
    <button onclick="restartGame()">重新开始</button>
    <button onclick="endGame()">结束游戏</button>
  </div>

  <div id="end-screen" class="screen screen-overlay" style="display:none;">
    <h1>游戏结束</h1>
    <p>本局得分: <span id="current-score"></span></p>
    <p>历史最高分: <span id="high-score"></span></p>
    <h2>玩家排行榜</h2>
    <ol id="leaderboard"></ol>
    <button onclick="restartGame()">重新开始</button>
  </div>

  <script src="./js/config.js"></script>
  <script src="./js/Sky.js"></script>
  <script src="./js/Loading.js"></script>
  <script src="./js/Hero.js"></script>
  <script src="./js/Bullet.js"></script>
  <script src="./js/Enemy.js"></script>
  <script src="./js/main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</body>

</html>